<template>
  <div  class="page-layout">
    <h1>DvChartRing</h1>
    <p>圆环图表</p>

    <h2>DvChartRing Settings</h2>
    <pre> 
      下面为 DvChartRing 的 settings 配置： 
      {
        label: Boolean,
        legend: {
          type: [String, Boolean],
          default: false,
          validator(val) {
            return ['vertical', 'horizontal', false].includes(val)
          }
        },
        radius: {
          type: Number,
          default: 45
        },
        title: String,
        useGap: {
          type: Boolean,
          default: false
        },
        // 环形颜色扩散效果
        blur: {
          type: Boolean,
          default: false
        },
        // 环形阴影效果
        shadow: {
          type: Boolean,
          default: true
        },
        trackWidth: {
          type: Number,
          default: 15,
          validator: function (t) {
            return Math.min(5, Math.max(t, 15))
          }
        }
      }     
    </pre>

    <h2>example1 基本使用</h2>
    <textarea readonly style="width: 800px; height: 100px">
      <dv-chart-ring :data="data1" fit :settings="{shadow: false}" ></dv-chart-ring>
      const data1 = ref({
        columns: ['渠道', '访问量'],
        rows: [ ['直接访问', 320], ['邮件营销', 302], ['联盟广告', 334], ['视频广告', 390], ['搜索引擎', 330], ['电梯广告', 320] ]
      }) 
    </textarea>
     
    <div class="demo-box" style="width: 800px; height: 400px; border: 1px solid;"  >
      <dv-chart-ring :data="data1" fit :settings="{shadow: false}" ></dv-chart-ring>
    </div>
    <br/>
    
    <h2>example2 settings使用</h2>
    <p>dv-chart-ring 是dv-chart-pie的升级版， 一般结合大屏dv-page 使用， 一下实例将在dv-paeg中展示</p> 

    <h3>
      settings: label、 radius、 title、 blur、 trackWidth
    </h3>
    <textarea readonly style="width: 800px; height: 90px">
      <dv-chart-ring :data="data1" fit :settings="{
              label: true, radius: 60, title: '测试标题', blur: true, trackWidth: 25
            }" ></dv-chart-ring>
    </textarea> 
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-ring :data="data1" fit :settings="{
              label: true, 
              radius: 60, 
              title: '测试标题', 
              blur: true,
              trackWidth: 25
            }" ></dv-chart-ring>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/>

    <h3>
      settings: useGap 
    </h3>
    <textarea readonly style="width: 800px; height: 50px">
      <dv-chart-ring :data="data1" fit :settings="{useGap: true, blur: true, trackWidth: 5}" ></dv-chart-ring>
    </textarea> 
    <div style="width: 1000px;  ">
      <demo-warp>
        <dv-page target="parent" fit> 
          <dv-box x-align="center" y-align="middle" width="80%" height="80%"  >
            <dv-chart-ring :data="data1" fit :settings="{useGap: true, blur: true, trackWidth: 5, legend: 'horizontal'}" debug></dv-chart-ring>
          </dv-box>
        </dv-page>
      </demo-warp>
    </div> 
    <br/> 

    <br/><br/>
    <h2>更多个性化配置</h2>
    <p>参考 图表组件 extend配置的用法， <router-link to="/example/extend-use">extend 配置使用</router-link></p>
    <br/><br/>
    
  </div>

</template>
<script setup lang="ts" >
import {DvPage, DvBox, DvChartRing} from '$comp/index';
import {ref} from 'vue' 
const data1 = ref({
  columns: ['渠道', '访问量'],
  rows: [
      ['直接访问', 320],
      ['邮件营销', 302],
      ['联盟广告', 334],
      ['视频广告', 390],
      ['搜索引擎', 330],
      ['电梯广告', 320]
  ]
}) 


 
// import demoWarp from '@/components/demo-warp.vue';
</script>
<style lang="scss" scoped>
 .page-layout{
  height: 100%;
  
 }
</style>